<template>
  <div class="template-library-wrap">
    <!-- 选项卡部分 -->
    <ul class="tabs-card-type-list">
      <li
        v-for="(tabItem, index) in cardTabs"
        :key="index"
        class="tabs-card-type-item"
        :class="{ active: tabItem.type === currTabType }"
        @click="currTabType = tabItem.type"
      >
        {{ tabItem.name }}
      </li>
    </ul>

    <!-- 模板库列表 -->
    <div class="template-card-list">
      <template-card-item
        v-for="cardItem in currentCardSysList"
        :key="cardItem.cardId"
        class="dynamic-card-list__item"
        :card-item="cardItem"
        :card-type="cardType"
        @update="update"
        @preview="preview"
      ></template-card-item>
    </div>

    <!-- 预览组件 -->
    <preview-card-dialog ref="previewDialog" :fields="fields" />
  </div>
</template>

<script>
/* constant */
import { ADDITIONAL_TYPE_TABS } from '../../constant';
/* component */
import TemplateCardItem from './TemplateCardItem.vue';
import PreviewCardDialog from './PreviewCardDialog';

export default {
  props: {
    cardSysList: {
      type: Array,
      default: () => [],
    },
    cardType: {
      type: String,
      default: 'addCardSet'
    }
  },
  data() {
    return {
      currTabType: 0, //  当前选择的 tab
      fields: [],
    };
  },
  computed: {
    /* tabs 列表 */
    cardTabs() {
      return ADDITIONAL_TYPE_TABS;
    },
    /* 当前选择tab对应的模板列表 */
    currentCardSysList() {
      // 全部
      if (this.currTabType === 0) return this.cardSysList;

      return this.cardSysList.filter(
        cardItem => cardItem.type === this.currTabType
      );
    },
  },
  methods: {
    preview(card) {
      this.fields = card.fieldsModule;
      this.$refs.previewDialog.openDialog();
    },
    update(card, inputType, id) {
      this.$emit('update', card, inputType, id);
    }
  },
  components: {
    TemplateCardItem,
    PreviewCardDialog
  },
};
</script>

<style lang="scss" scoped>
.template-library-wrap {
  .tabs-card-type-list {
    margin-bottom: 12px;
    padding-left: 0;
    display: flex;
    justify-content: flex-start;

    .tabs-card-type-item {
      width: 101px;
      height: 50px;
      line-height: 50px;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
      border-radius: $button-radius-base;
      font-size: $font-size-large;
      text-align: center;
      margin-right: 12px;
      cursor: pointer;

      &.active {
        background: linear-gradient(135deg, $color-primary-light-3 0%, $color-primary-light-6 100%);
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
        color: #fff;
      }
    }
  }

  .template-card-list {
    display: flex;
    flex-flow: wrap;
    overflow: auto;
    height: calc(100vh - 210px);
    @include dynamic-card-list(2);
  }
}
</style>
